<template>
	<view class="content">
		<scroll-view class="left" scroll-y>
			<view @click="change(index)" :class="active==index?'active':''" v-for="(item,index) in listarr">{{item.cat_name}}</view>
		</scroll-view>
	    <scroll-view class="right" scroll-y >
			<view v-if="active==0" v-for="(item,index) in childarr" class="">
				<!-- {{item.cat_icon}} -->
				<image @click="lookimg(item.cat_icon)" :src="item.cat_icon" mode=""></image>
			</view>
			<view v-if="active==1" class="">
				1
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				listarr:[],
				active:0,
				childarr:[]
			}
		},
		onLoad() {
			this.getlist()
		},
		methods:{
			lookimg:function(current){
			let urls=this.childarr.map((item)=>{
					return item.cat_icon
				})
				console.log('urls',urls)
				uni.previewImage({
					current,
					urls
				})
			},
			async getlist(){
				const res=await this.$myRequest({
					url:"/categories"
				})
				// console.log(res.data.message[0].children[0].children)
				this.listarr=res.data.message
				this.childarr=res.data.message[0].children[0].children
			  },
			  change:function(index){
				  console.log(index)
				  this.active=index
				  
			  }
		}
	}
</script>

<style lang="scss">
	.content{
		width: 100%;
		height: 100vh;
		display: flex;
		.left{
			width: 200rpx;
			height: 100%;
			view{
				width: 200rpx;
				height: 120rpx;
				line-height: 120rpx;
				text-align: center;
			}
			.active{
				background-color: $index-color;
				color: pink;
			}
		}
		.right{
			width: 550rpx;
			height: 100%;
		}
	}
	
</style>
